<!--
开发者：ms.hui
开发时间：2021.03.10
功能：圆环进度条
公用组件
-->
<template>
  <div class="echarts" :id="chartId"></div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      columnarEcharts: {}
    };
  },
  methods: {},
  computed: {
    option() {
      return {
        title: {
          text: this.title,
          subtext: this.subtitle,
          left: "center",
          top: "40%",
          itemGap: 10,
          textStyle: {
            color: this.titleColor,
            fontSize: 12
          },
          subtextStyle: {
            color: this.titleColor,
            fontWeight: 700,
            fontSize: 14
          }
        },
        color: ["rgba(255, 255, 255, 0.1)"],
        legend: {
          show: false,
          data: []
        },
        series: [
          {
            name: "Line",
            type: "pie",
            clockWise: true,
            radius: this.Radius,
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 100 - this.seriesData
              },
              {
                value: this.seriesData,
                name: "",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: this.seriesColor1 // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: this.seriesColor2 // 100% 处的颜色
                        }
                      ]
                    },
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }
            ]
          }
        ]
      };
    }
  },
  props: {
    //图表id
    chartId: {
      type: String
    },
    //图表标题
    title: {
      type: String
    },
    //图表副标题
    subtitle: {
      type: String
    },
    //标题颜色
    titleColor: {
      type: String
    },
    // 圆环0% 处的颜色
    seriesColor1: {
      type: String
    },
    // 圆环100% 处的颜色
    seriesColor2: {
      type: String
    },
    // 圆环占比
    seriesData: {
      type: Number,
      default: 0
    },
    // 圆环标题和副标题颜色
    titleColor: {
      type: String
    },
    // 圆环大小
    Radius: {
      type: Array,
      default: []
    }
  },
  watch: {
    //检测数据变化更新图表
    seriesData(val) {
      this.columnarEcharts.setOption(this.option);
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      this.columnarEcharts = echarts.init(
        document.getElementById(that.chartId)
      );
      this.columnarEcharts.setOption(this.option);
      window.addEventListener("resize", function() {
        if (
          that.columnarEcharts._dom.clientHeight != 0 &&
          that.columnarEcharts._dom.clientWidth != 0
        ) {
          that.columnarEcharts.resize();
        }
      });
    });
  }
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
